<template>
    <div id="container">
        <div id="viewDiv"></div>
        <!--👇信息窗口,使用绝对定位方式,默认display属性为none-->
        <div ref="popup_return" style="position:absolute;max-width:250px;max-height:300px;padding:15px;
        background-color:white;border-radius:15px;box-shadow:0 0 5px gray" 
        :style="{top:top,left:left,display:display}">
            <img :src="img_src" style="display:block;width:100%;max-height:300px;border-radius:5px">
        </div>
    </div>
</template>
  
<script setup>
import * as 天地图 from '../天地图'
import {onMounted,ref} from 'vue'
import Map from "@arcgis/core/Map.js"
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
var map,layer,view,graphicsLayer,graphic
const img_src=ref('')//该变量存储图片url地址
const top=ref()//存储信息窗口的y轴位置
const left=ref()//存储信息窗口的x轴位置
const display=ref('none')
onMounted(()=>{
  layer=new FeatureLayer({
    title:"测试图层",
    url:"https://ws8575.club/web/rest/services/Hosted/要素图层发布测试_前端渲染测试_3857/FeatureServer/0",
    renderer:{
      type:"simple",
      symbol:{
        type:"simple-marker",
        color:[200,50,50],
        size:11,
        outline:{
          width:1,
          color:[255,255,255]
        }
      }
    },
    outFields:["*"]
  })
  graphicsLayer=new GraphicsLayer()
  map=new Map({
    basemap:{
        baseLayers:天地图.天地图矢量
    },
    layers:[layer,graphicsLayer]
  })
  view=new MapView({
    map:map,
    container:"viewDiv",
    center:[120.4,36.1],
    zoom:13,
    popupEnabled:false,//禁用左键单击自动弹出信息窗口(允许使用视图对象的左键click事件弹出自定义信息窗口)
    constraints:{
      rotationEnabled:false,
      maxScale:1300
    }
  })
  view.ui.remove(["zoom","attribution"])
  view.on("pointer-move", function (event) {//视图对象点击事件的回调函数
    view.graphics.removeAll()//先清空所有图形
    view.hitTest(event).then(function (response) {//返回点击到的结果
        var graphics=response.results.map((item)=>{
            if(item.type==="graphic" && item.graphic.layer===layer){
                return item.graphic
            }
        })
        var graphics_view=response.results.map((item)=>{
            if(item.type==="graphic" && item.graphic.layer===graphicsLayer){
                return item.graphic
            }
        })
        if(!graphics_view[0] && graphics[0]){//返回了要素图层的图形并且没有返回图形图层的图形
            graphic = graphics[0]
            graphic.symbol={
                type:"simple-marker",
                color:[115,223,255,0.5],
                size:11,
                outline:{
                    color:[115, 223, 255],
                    width:1
                }
            }
            graphicsLayer.graphics.add(graphic)//向视图添加这个图形 
            display.value="block"
            top.value=view.toScreen(graphic.geometry).y+"px"
            left.value=view.toScreen(graphic.geometry).x+10+"px"
            img_src.value=graphic.attributes.image
        }else if(!graphics_view[0] && !graphics[0]){
            graphicsLayer.graphics.removeAll()
            display.value="none"
        }
    })
  })//onMounted结尾
})
</script>
  
<style scoped>
#viewDiv,#container{
  height:100%;width:100%;padding:0;margin:0;
}
div{
    font-size:0
}
span{
  white-space: pre-line;
}
</style>
